@import "./reward.less";

#post {
  margin: auto;
  padding: 0 24px;
  width: 100%;
  max-width: 1200px;

  .information {
    position: relative;
    margin-top: 36px;
    margin-bottom: 36px;
    padding: 40px 80px;
    width: 100%;
    height: 350px;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .4);
    border-radius: 4px;
    z-index: 1;

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 270px;
      color: #ffffff;

      .main {
        height: 250px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .category {
          position: relative;
          text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
          opacity: .75;
          color: #ffffff;
          font-size: 16px;
          width: fit-content;

          &::after {
            position: absolute;
            content: "";
            display: block;
            left: 0;
            bottom: -8px;
            height: 1px;
            width: 100%;
            background: currentColor;
            opacity: .3;
          }
        }

        p {
          margin-top: 20px;
          font-weight: 400;
          font-size: 28px;
          text-shadow: 0 3px 5px rgba(0, 0, 0, .3);
          color: inherit;
        }
      }

      .fringe {
        display: flex;
        flex-direction: row;
        height: 20px;
        line-height: 20px;
        color: #bdbdbd;
        font-size: 13px;

        .word-count {
          cursor: pointer;
        }
      }
    }
  }

  .wrapper {
    .end {
      margin-top: 60px;

      .reward {
        margin-bottom: 20px;
        text-align: center;

        button {
          color: #738192;
          box-shadow: 0 13px 15px rgba(0, 0, 0, .1);
          border: none;
          font-weight: 600;

          &:hover {
            color: @primary-color;
          }
        }
      }

      .copyright {
        position: relative;
        height: 40px;
        line-height: 40px;
        border-top: 1px solid #eff2f7;

        .ant-btn {
          padding: 0;
          color: #a3aab1;
        }
      }

      #tag-cloud {
        background-color: inherit;
      }
    }
  }

  .catalog {
    position: fixed;
    right: 20px;
    bottom: 140px;
    border-radius: 20px;
    box-shadow: 0 3px 12px darken(@primary-color, 1%);
    background-color: @primary-color;
    z-index: 10;

    & > .ant-btn {
      &:hover,
      &:focus {
        background-color: @primary-color;
        border-color: @primary-color;
      }
    }
  }
}

body.dark {
  #post {
    .wrapper {
      .end {
        .reward {
          button {
            background-color: @dark-text-color-9;
            color: @dark-text-color;
          }
        }

        .copyright {
          border-top-color: @dark-text-color-8;

          .ant-btn {
            color: @dark-text-color-8;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 992px) {
  #post {
    .information {
      margin-top: 30px;
      margin-bottom: 30px;
      padding: 30px 60px;
      height: 300px;

      .content {
        height: 240px;

        .main {
          height: 220px;

          p {
            font-size: 26px;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  #post {
    .information {
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 20px;
      height: 240px;

      .content {
        align-items: center;
        height: 200px;
        text-align: center;

        .main {
          align-items: center;
          height: 180px;

          p {
            font-size: 20px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 480px) {
  #post {
    .information {
      .content {
        .main {
          .category {
            font-size: 14px;
          }

          p {
            font-size: 18px;
          }
        }
      }
    }
  }
}
